{% extends "base.html" %}
{% block page_title %}Add Project - Step {{ wizard.steps.step1 }}{% endblock %}

{% load i18n %}
{% load static %}
{% load render_bundle from webpack_loader %}
{% load progress_bar %}
{% block head %}
{{ wizard.form.media }}
{{ form.media.css }}
{% endblock %}

{% block content %}
<div class="overlay">
  <div class="overlay_contents">
    <div id="second_progress"></div>
    <span id="loading_text"></span>
  </div>
</div>
<div class="error-messages">{{ wizard.non_form_errors }}</div>
<div class="row">
  <div class="col-md-8 col-md-offset-2">

    <div class="card">
      {% progress_bar_media %}
      <div class="cardface">
        <form action="." method="post" enctype="multipart/form-data" onsubmit="addASpinner()">
          {% csrf_token %}

          {{ wizard.management_form }}

          <h1>Data Upload Instructions</h1>
          <h3>Description</h3>
          <p>Time to upload your data! Please upload a data file that contains text (and optionally labels) for your project. To upload, the file <strong>must pass the following checks:</strong></p>
          <ul class="list-group">
            <li class="list-group-item">The file needs to have either a <code>.csv</code>, <code>.tsv</code>, or <code>.xlsx</code> file extension.</li>
            <li class="list-group-item">The file requires the data to be formatted into two columns, with header names <code>Text</code> and <code>Label</code> OR three columns with header names <code>ID</code> <code>Text</code> and <code>Label</code>.</li>
            <li class="list-group-item">The largest file size supported is 500MBs.</li>
          </ul>
          <p>The (optional) <code>ID</code> column should contain a <b>unique</b> identifier for your data. The identifiers should be no more than 128 characters.</p>
          <p>The <code>Text</code> column should contain the text you wish users to label. For example, if you are building a sentiment analysis classifier to predict whether a tweet is positive, negative, or neutral, the <code>Text</code> column would contain the tweets.</p>
          <p>The <code>Label</code> column should contain any pre-exisiting labels for the corresponding text. If none of your data contains existing labels, then this column can be left blank. Extending our sentiment analysis example, if a lead coder has already annotated some tweets as positive, negative, or neutral, this column would contain those labeled records.</p>
          <p><i>Data Upload Notes:</i></p>
          <ul class="list-group">
            <li class="list-group-item">SMART restricts your project to having two million unique records.</li>
            <li class="list-group-item">If there are multiple rows with the same text, only one of the records will be saved.</li>
            <li class="list-group-item">SMART will keep up to two million unique records per data set.</li>
          </ul>
          <div class="form-group">
            <label class="control-label" for="{{ wizard.form.data.id_for_label }}">{{ wizard.form.data.label }}</label>
            <input class="form-control" id="{{ wizard.form.data.id_for_label }}" maxlength="30" name="{{ wizard.form.data.html_name }}" type="file" placeholder="{{ form.data.label }}" />
            <div class="error-messages">{{ wizard.form.data.errors }}</div>
          </div>
        <div class="wizard_nav_bar">
          <button class="btn btn-info" name="wizard_goto_step" type="submit" value="project">1. Info</button>
          <button class="btn btn-info" name="wizard_goto_step" type="submit" value="labels">2. Labels</button>
          <button class="btn btn-info" name="wizard_goto_step" type="submit" value="permissions">3. Permissions</button>
          <button class="btn btn-info" name="wizard_goto_step" type="submit" value="advanced">4. Advanced</button>
          <button class="btn btn-info" name="wizard_goto_step" type="submit" value="codebook">5. CodeBook</button>
          <input class="btn btn-primary" type="submit" value="Submit"/>
          <p class="pull-right">Step {{ wizard.steps.step1 }} of {{ wizard.steps.count }}</p>
        </div>

        </form>
        <hr>
        <p>An example dataset can be downloaded from <a href="{% static 'example.csv' %}">here</a>.</p>
      </div>

    </div>
  </div>
{% progress_bar %}
</div>

{% endblock %}

{% block scripts_body %}
<script type="text/javascript">
function addASpinner() {
  $('.overlay').show();
  $('#loading_text').html("Please wait. Uploading data...");
  $("#second_progress").addClass("loader");
  var refreshID = setInterval(function() {
    var progress = $('#progressBar').attr('value');
    if (progress >= 100) {
      //update the loading message
      $('#loading_text').html("Please wait. Processing data...");
      clearInterval(refreshID);
    }
  }, 10000);

  //after 30 seconds, update the message
  setTimeout(function() {
    $('#loading_text').html("STILL Processing data...");
  }, 30000)
}
</script>
{% endblock %}
